<template>
	<view class="sMD">
		<view class="sMDBack">
			<view class="sMDTitle font_blod">
				已完成
			</view>
			<view class="sMDFlow">
				<view class="sMDFlowLi">
					<view class="sMDFlowLiHead">
						<view class="sMDFlowLiHeadL font_blod" style="color: #000000;">
							已完成
						</view>
						<view class="sMDFlowLiHeadR">
							{{msg.transferTime}}
						</view>
					</view>
					<view class="sMDFlowLiSta">
						订单已完成
					</view>
					<image class="sMDFlowLiImg" src="../../../static/manufacturers/check_blue.png" mode=""></image>
					<view class="sMDFlowLiImgNo">
						
					</view>
				</view>
				<view class="sMDFlowLi">
					<view class="sMDFlowLiHead">
						<view class="sMDFlowLiHeadL font_blod">
							已审核
						</view>
						<view class="sMDFlowLiHeadR">
							{{msg.platformTime}}
						</view>
					</view>
					<view class="sMDFlowLiSta">
						订单审核完成
					</view>
					<!-- <image class="sMDFlowLiImg" src="../../../static/manufacturers/check_blue.png" mode=""></image> -->
					<view class="sMDFlowLiImgNo">
						
					</view>
				</view>
				<view class="sMDFlowLi">
					<view class="sMDFlowLiHead">
						<view class="sMDFlowLiHeadL font_blod">
							已鉴定
						</view>
						<view class="sMDFlowLiHeadR">
							{{msg.agentTime}}
						</view>
					</view>
					<view class="sMDFlowLiSta">
						订单鉴定完成
					</view>
					<!-- <image class="sMDFlowLiImg" src="../../../static/manufacturers/check_blue.png" mode=""></image> -->
					<view class="sMDFlowLiImgNo">
						
					</view>
				</view>
				<view class="sMDFlowLi">
					<view class="sMDFlowLiHead">
						<view class="sMDFlowLiHeadL font_blod">
							已申请
						</view>
						<view class="sMDFlowLiHeadR">
							{{msg.createTime}}
						</view>
					</view>
					<view class="sMDFlowLiSta">
						订单申请完成
					</view>
					<!-- <image class="sMDFlowLiImg" src="../../../static/manufacturers/check_blue.png" mode=""></image> -->
					<view class="sMDFlowLiImgNo">
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="sMDPJ">
			<view class="sMDPJHead" @click="cli_showPJ">
				<view class="font_blod">
					配件信息
				</view>
				<image v-if="show_pj" class="sMDPJHeadImg" src="../../../static/manufacturers/top.png" mode=""></image>
				<image v-else class="sMDPJHeadImg" src="../../../static/manufacturers/btm.png" mode=""></image>
			</view>
			<view class="sMDPJMain" v-if="show_pj">
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						配件名称：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.partsName}}
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						配件型号：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.attributeName}}
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						申请损坏日期：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.createTime}}
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						安装日期：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.installTime}}
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						工时费补助金：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.payPrice}}元
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						补助金质保有效期:
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.grantsPeriod}} 截止
					</view>
				</view>
				<!-- 废弃 2022-4-6 -->
				<!-- <view class="sMDPJLi">
					<view class="sMDPJLiL">
						候保工时费补贴期:
					</view>
					<view class="sMDPJLiR">
						{{msg.}}
					</view>
				</view> -->
				<!-- <view class="sMDPJLi">
					<view class="sMDPJLiL">
						候保二维码有效期:
					</view>
					<view class="sMDPJLiR">
						2021-12-08 至 2021-12-09
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						无忧质保期:
					</view>
					<view class="sMDPJLiR">
						12个月
					</view>
				</view> -->
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						初始安装凭证：
					</view>
					<view class="sMDPJLiR">
						<image v-for="(item,index) in changeImg(msg.installImages)" :key="index" class="sMDPJLiRImg" :src=item mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="sMDPJ">
			<view class="sMDPJHead font_blod">
				申请补助金信息
			</view>
			<view class="sMDPJMain">
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						故障描述：
					</view>
					<view class="sMDPJLiR font_blod">
						{{msg.faultDetails}}
					</view>
				</view>
				<view class="sMDPJLi">
					<view class="sMDPJLiL">
						故障产品凭证：
					</view>
					<view class="sMDPJLiR">
						<image v-for="(item,index) in changeImg(msg.faultImages)" :key="index" class="sMDPJLiRImg" :src=item mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				show_pj: false,
				id: '',
				msg: {}
			}
		},
		onLoad(val) {
			this.id = val.id
		},
		mounted() {
			this.getQrCodeApplyDetails()
		},
		methods: {
			// 获取详情
			getQrCodeApplyDetails () {
				uni.request({
					url: allapi.getQrCodeApplyDetails,
					data: {
						applyId: this.id
					},
					success: (res) => {
						console.log('获取详情',res);
						this.msg = res.data.data
					}
				})
			},
			// 展示隐藏
			cli_showPJ () {
				this.show_pj = !this.show_pj
			},
			// 改变图片
			changeImg (val) {
				if (val) {
					return val.split('|')
				}else {
					return []
				}
			}
		}
	}
</script>

<style scoped>
	.sMDBack {
		background: url('https://www.zzzsyh.com/applets/agent/factory/26.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.sMDTitle {
		height: 110rpx;
		display: flex;
		align-items: center;
		margin-left: 84rpx;
		font-size: 42rpx;
		color: #FFFFFF;
	}
	.sMDFlow {
		margin: 0 32rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		/* height: 586rpx; */
		padding: 52rpx 0 10rpx 0;
	}
	.sMDFlowLi {
		margin: 0 32rpx;
		height: 150rpx;
		border-left: 1rpx solid #BBBBBB;
		padding-left: 38rpx;
		position: relative;
	}
	.sMDFlowLi:last-child {
		border: none;
	}
	.sMDFlowLiHead {
		display: flex;
		justify-content: space-between;
	}
	.sMDFlowLiHeadL {
		font-size: 28rpx;
		color: #999999;
	}
	.sMDFlowLiHeadR {
		color: #999999;
		font-size: 24rpx;
	}
	.sMDFlowLiSta {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
		line-height: 34rpx;
	}
	.sMDFlowLiImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: -16rpx;
		top: 0rpx;
		z-index: 6;
		overflow: hidden;
		background: #FFFFFF;
	}
	.sMDFlowLiImgNo {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		position: absolute;
		left: -11rpx;
		top: 0rpx;
		background: #FFFFFF;
		border: 2rpx solid #BBBBBB;
	}
	.sMDPJ {
		border-radius: 16rpx;
		background: #FFFFFF;
		margin: 24rpx 32rpx;
	}
	.sMDPJHead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #333333;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 28rpx;
	}
	.sMDPJHeadImg {
		width: 36rpx;
		height: 36rpx;
	}
	.sMDPJMain {
		margin:0 32rpx;
		padding-bottom: 32rpx;
	}
	.sMDPJLi {
		display: flex;
		margin-top: 38rpx;
	}
	.sMDPJLi:first-child {
		margin-top: 0;
	}
	.sMDPJLiL {
		width: 202rpx;
		color: #666666;
		font-size: 24rpx;
	}
	.sMDPJLiR {
		flex:1;
		font-size: 28rpx;
		color: #333333;
		margin-left: 16rpx;
	}
	.sMDPJLiRImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		background: #EEEEEE;
		margin-right: 16rpx;
	}
	.sMDPJBZJ {
		margin: 24rpx 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx 28rpx;
	}
</style>
